<template>
  <view class="page-default">
    <c-nav-bar title="信息查询" type="white" bg-color="rgba(255,255,255,0.6)" />

    <view class="bg-green-white mx-2 mt-6 rounded-4 pb-4">
      <view class="mb-4 flex items-center justify-center pt-4">
        <u-image class="avatar border border-4" radius="8" src="/static/images/clubs.png" height="160" width="140" mode="aspectFill" />
      </view>
      <view class="text-center">
        <view class="m-b-2 text-xl text-#265A63 font-bold">
          谢之遥
        </view>
        <view class="text-lg text-#3AA69B">
          欢迎2025级新生
        </view>
      </view>

      <view class="content m-3 mt-6 rounded-4 bg-white px-4 line-height-6">
        <u-cell-group :border="false">
          <u-cell title="专业" value="旅游服务与管理" />
          <u-cell title="班级" value="2025级旅游1班" />
          <u-cell title="教室" value="2-24" />
          <u-cell title="宿舍" :border="false" value="女生公寓4-10" />
        </u-cell-group>
      </view>

      <view class="m-3 mb-4 mt-6 rounded-2 bg-white px-4 pb-8 pt-2 line-height-6">
        <view class="m-3 mt-4 flex items-center text-#1A2B5C font-bold">
          <view class="mr-2 h-4 w-6px rounded-2 bg-#02CAB1" />班级报到情况
        </view>

        <view class="flex border py-4">
          <view class="h-20 flex items-center" style="flex-basis: 40%">
            <ProcessChart color="green" class="mt-8" />
          </view>
          <view class="h-20 pb-4" style="flex-basis: 60%">
            <view>
              你是<text class="font-bold">
                旅游服务与管理专业1班
              </text>
              第 <text class="text-lg text-#3AA69B font-bold">
                15
              </text>名报到的学生
            </view>
            <view>你们班</view>
            <view>
              已经有 <text class="text-lg text-#3AA69B font-bold">
                36
              </text> 名同学报名啦
            </view>
          </view>
        </view>
      </view>
      <view class="m-3 mb-4 mt-6 rounded-2 bg-white px-4 pb-8 pt-2 line-height-6">
        <view class="m-3 mt-4 flex items-center text-#1A2B5C font-bold">
          <view class="mr-2 h-4 w-6px rounded-2 bg-#02CAB1" />室友汇合
        </view>
        <view class="flex py-4">
          <view class="basis-2/3 px-4">
            <view class="mt-4">
              哇！你是你们宿舍第 <text class="text-lg text-#3AA69B font-bold">
                8
              </text>个报到哦！
            </view>
            <view>室友们已经在等待您啦！</view>
          </view>
          <view class="h-20 basis-1/3">
            <u-image class="" src="/static/images/ovation.png" height="120" width="120" mode="aspectFill" />
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import ProcessChart from '../analysis/common/process.vue';
</script>

<style lang="scss" scoped>
:deep(uni-page-body){
    background-color: #E7F6EA !important;
  }
.page-default {
  width: 100%;
  min-height: 100vh;
  background: url('@/static/images/welcome/header-bg.png') no-repeat center top ;
  background-size: 100% 50%;
}
.bg-green-white {
  background: rgba(255,255,255,0.3);
  /* 渐变色设置 */
}
.bg-trans {
  width: 100%;
  height: 200rpx;
  background: url('@/static/images/welcome/trans-bg.png') no-repeat;
  background-size: 100% 100%;
}
:deep(.u-line){
 border-bottom: 2px dashed #e0e7ec !important;
}
:deep(.u-cell__title-text){
  color: #6E7B8B;
}
:deep(.u-cell__value){
  color: #000000;
}
</style>
